<template>
	<view v-if="pageShow" class="container">
		<!-- 需求详情 -->
		<view class="demand-info">
			<view class="title">
				<text class="name">{{demandObj.name}}</text>
				<text class="status" :class="demandObj.status == 0?'status0':'status1'">{{demandObj.status == 0?'可参与':demandObj.status == 1?'已中标':demandObj.status == 2?'已取消':''}}</text>
				<!-- <image :src="isCollect === 0?'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_icon.png':'https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/shopImg/collect_select.png'" class="collect-img" @click="setCollect"></image> -->
			</view>
			<view class="main-content">
				截止时间<text class="text">{{$moment(demandObj.end_time_text).format('YYYY-MM-DD')}}</text>
			</view>
			<view class="main-content">
				预算金额<text class="text">{{demandObj.money==0?'面议':demandObj.money}}</text>
			</view>
			<view class="main-content">
				需求类型<text class="text">{{demandObj.cate.one_cate_name}}·{{demandObj.cate.two_cate_name}}</text>
			</view>
			<view class="main-content">
				需求地区<text class="text">{{demandObj.city_name}}</text>
			</view>
			<view class="main-content">
				需求描述<text class="text">{{demandObj.describe}}</text>
			</view>
			<view v-if="demandObj.annex" class="mian-img">
				<view class="img" v-for="(val, idx) in demandObj.annex.split(',')" :key="idx" @click.stop="viewImg(demandObj.annex)">
					<image :src="val" mode="aspectFill"></image>
				</view>
			</view>
			<view class="bottom-btn">
				<button 
					class="btn" 
					data-target="demandModal"
					@click="signDemand" 
					:class="demandObj.status == 0?'click-btn': 'dis-btn'" 
					:disabled="demandObj.status == 1">
					报名参与
				</button>
				<button v-if="contactTrue" class="btn-contact" @click="contactUser">
					去联系
				</button>
			</view>
		</view>
		
		<!-- 参与投标列表 -->
		<view class="join-info">
			<view class="title">
				参与投标（{{joinList.length}}）
			</view>
			<view class="join-list solid-bottom" v-for="(item, index) in joinList" :key="index">
				<view class="header">
					<view class="service-info">
						<view class="name-content">
							<view class="logo">
								<image :src="item.serviceinfo.logo" class="logo" mode="aspectFill"  @click.stop="goServiceInfo(item)"></image>
							</view>
							<text class="name">{{item.serviceinfo.name}}</text>
						</view>
						<view class="service-text">
							<text>{{getServiceType(item.serviceinfo.type)}}</text>
							<text style="margin-left: 8rpx;">保证金{{item.serviceinfo.cash_deposit}}</text>
						</view>
					</view>
					<image v-if="item.is_success == 1" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/success-demand.png" class="success-img"></image>
				</view>
				<view class="service-des">
					<text>{{item.illustrate}}</text>
				</view>
				<view v-if="item.pic" class="service-img">
					<view class="img" v-for="(val, idx) in item.pic.split(',')" :key="idx" @click.stop="viewImg(item.pic)">
						<image :src="val" mode="aspectFill"></image>
					</view>
				</view>
				<view class="btn">
					<view v-if="userId == demandObj.user_id&&demandObj.status==0&&item.is_success==0" class="hire-btn" @click.stop="goHire(item.serviceinfo)">
						<text>雇佣TA</text>
					</view>
					<view v-if="userId != item.serviceinfo.user_id" class="go-contact" @click.stop="goContact(item)">
						<text>去沟通</text>
					</view>
				</view>
			</view>
			<view v-if="joinList.length === 0" class="empty-wrap" >
			  <image class="empty-img" src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/enterprise-service/demand/no-joinList.png"></image>
			  <text class="tips">暂无内容</text>
			</view>
		</view>
		
		<!-- 参与需求弹框 -->
		<view class="cu-modal" :class="demandModal=='demandModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white" style="display: flex; justify-content: space-between; padding: 0 30rpx;">
					<view style="color: #666666;" @tap="hideModal">取消</view>
					<view style="color: #576B95;" @click="saveDemand">确定</view>
				</view>
				<view class="bg-white content">
					<view class="cu-form-group align-start solid-bottom" style="text-align: left;">
						<view class="title" style="color: #333; font-weight: bold;">投标说明</view>
						<textarea maxlength="-1" v-model="demandDes" placeholder="请尽可能的详细描述您的需求~"></textarea>
					</view>
					<view class="cu-bar bg-white">
						<view class="action" style="color: #333; font-weight: bold;">
							上传图片
						</view>
						<view class="action">
							{{imgList.length}}/3
						</view>
					</view>
					<view class="cu-form-group">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]" style="text-align: left;">
							 <image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<3">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
					<view class="img-notice">
						仅支持png，jpg，jpeg格式，大小5M内 图片上传数量不超过3张
					</view>
				</view>
			</view>
		</view>
		<!-- 底部固定按钮-->
		<view class="fixed-btn" v-if="loginBtn">
			<view class="bottom-btn">
				<view class="btn-text">
					<text>
						登录查看更多优质内容
					</text>
					<text>
						新用户登录即享好礼~
					</text>
				</view>
				<view class="btn" @click="goWxLogin">
					马上登录
				</view>
			</view>
		</view>
		<!-- 底部固定按钮 end-->
	</view>
</template>

<script>
	import homeApi from "@/api/home.js"
	import demandApi from "@/api/demand.js"
	import personalApi from '@/api/personal.js'
	export default {
		data() {
			return {
				pageShow: false,
				demandId: '',
				demandObj: {},
				joinList: [],
				userId: null,
				isCollect: null,
				//参与需求弹出框
				demandModal: null,
				imgList: [],
				demandDes: '',
				contactTrue: false,
				
				inviteCode: '',
				loginBtn: true
			}
		},
		onLoad(e) {
			this.demandId = e.id
			this.userId = uni.getStorageSync('userInfo').id
			this.inviteCode = uni.getStorageSync('userInfo').invite_code
			console.log('获取自己的邀请码', this.inviteCode)
			if(e.invite_code) {
				uni.setStorageSync('inviteCode', e.invite_code)
				console.log('我已经保存了inviteCode', e.invite_code)
			}
			this.getDetail()
		},
		onShow() {
			if(uni.getStorageSync('token')) {
				this.loginBtn = false
			}else {
				this.loginBtn = true
			}
		},
		methods: {
			async getWeChatClick() {
				const pages = getCurrentPages()
				let currentRoute  = pages[pages.length - 1].route
				let obj = {
					type: 3,
					m_id: 9,
					describe: this.demandObj.name,
					url: currentRoute,
					code: 'WH1'
				}
				let res = await personalApi.getWechatClick(obj)
			},
			//分享微信好友
			onShareAppMessage() {
				return {
					title: this.demandObj.name,
					path: '/pagesDemand/demandDetail/demandDetail?invite_code=' + this.inviteCode + "&id=" + this.demandId + "&pathType=3"
				}
			},
			
			//分享微信朋友圈
			onShareTimeline() {
				return {
					title: this.demandObj.name,
					query: 'id=' + this.demandId + "&invite_code=" + this.inviteCode + "&pathType=3"
				}
			},
			
			//去往登录页
			goWxLogin() {
				uni.redirectTo({
					url: "/pagesLogin/wxLogin/wxLogin?id=" + this.demandId + "&pathType=3"
				})
			},
			//获取不同的服务商类型
			getServiceType(type) {
			  let text = "";
			  switch (type) {
			    case 1:
			      text = "官方服务商";
			      break;
			    case 2:
			      text = "金牌服务商";
			      break;
			    case 3:
			      text = "银牌服务商";
			      break;
			    case 4:
			      text = "铜牌服务商";
			      break;
			    case 5:
			      text = "普通服务商";
			      break;
			  }
			  return text;
			},
			
			//获取需求详情
			async getDetail() {
				let res = await demandApi.getDemandDetail({demand_id: this.demandId})
				if(res.code === 1) {
					this.demandObj = res.data.info
					this.isCollect = res.data.is_collect
					this.joinList = res.data.joinlist
					this.getWeChatClick()
					this.pageShow = true
					this.joinList.forEach((val) => {
						if (val.serviceinfo.user_id == this.userId) {
							this.contactTrue = true;
						}			
					});
				}else {
					this.$common.msgShow(res.msg)
				}
			},
			
			//报名参与需求
			signDemand(e) {
				if(!uni.getStorageSync('token')) {
					this.$common.handleToken()
					return
				}
				if(this.userId == this.demandObj.user_id) {
					this.$common.msgShow('您不能报名参与自己发布的需求')
					return
				}
				if(this.demandObj.status !== 0) {
					return
				}
				this.demandModal = e.currentTarget.dataset.target
			},
			hideModal() {
				this.demandModal = null
			},
			
			//预览图片信息
			viewImg(val) {
				console.log(val)
				uni.previewImage({
					urls: val.split(',')
				})
			},
			
			//图片上传
			ChooseImage() {
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						if (res.tempFilePaths.length > 0) {
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								this.imgUpload(res.tempFilePaths[i]);
								uni.showLoading({
									title: '上传中'
								});
							}
						}
					}
				});
			},
			//获取OSS图片数据
			imgUpload(img) {
				homeApi.uploadImg(img).then(res => {
					console.log(res)
					if (res.code === 1) {
						this.imgList.push(res.data.fullurl)
						uni.hideLoading();
					} else {
						this.$common.msgShow(res.msg);
					}
				})
			},
			//展示图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//删除图片
			DelImg(e) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除此图片？',
					cancelText: '再想想',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			
			//报名参与需求
			async saveDemand() {
				let obj = {
					illustrate: this.demandDes,
					pic: this.imgList.join(','),
					demand_id: this.demandId
				}
				let res = await demandApi.setDemand(obj) 
				if (res.code === 1) {
					this.$common.msgShow('报名参与成功')
					this.demandModal = null
					this.getDetail()
				}else {
					this.$common.msgShow(res.msg)
				}
			},
			
			//雇佣服务商
			goHire(item) {
				let that = this
				if(!uni.getStorageSync('token')) {
					this.$common.handleToken()
					return
				}
				uni.showModal({
					title: '温馨提示',
					confirmColor: '#0177FD',
					confirmText: '雇佣TA',
					cancelColor: "#999",
					content: '是否确认雇佣该服务商',
					success:function(res){
						if(res.confirm) {
							let obj = {
								demand_id: that.demandId,
								service_id: item.id
							}
							demandApi.hireService(obj).then(res => {
								if(res.code === 1) {
									that.$common.msgShow('雇佣成功')
									that.getDetail()
								}else {
									that.$common.msgShow(res.msg)
								}
							})
						}
					}
				})
			},
			
			//收藏需求
			async setCollect() {
				if(!uni.getStorageSync('token')) {
					this.$common.handleToken()
					return
				}
				let obj = {
					id: this.demandId,
					type: 14
				}
				let res = await homeApi.setCollect(obj)
				if(res.code === 1) {
					this.isCollect = 1 - this.isCollect
					if(this.isCollect === 1) {
						this.$common.msgShow('收藏成功')
					}else {
						this.$common.msgShow('取消收藏')
					}
				}
			},
			
			//与该商家沟通
			goContact(item) {
				if(!uni.getStorageSync('token')) {
					this.$common.handleToken()
					return
				}
				uni.setStorageSync("to_zim_userid", item.serviceinfo.user_id);
				uni.navigateTo({
					url: '/pages/message/chat?id=' + item.serviceinfo.user_id
				})
			},
			
			//跳转服务商详情
			goServiceInfo(item) {
				uni.navigateTo({
					url: '/pagesShop/serviceDetail/serviceDetail?id=' + item.serviceinfo.id
				})
			},
			
			//服务商联系客户
			contactUser() {
				uni.setStorageSync("to_zim_userid", this.demandObj.user_id);
				uni.navigateTo({
					url: '/pages/message/chat?id=' + this.demandObj.user_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'demandDetail.scss';
</style>
